Step 2 of 4: Adding Buttons

In this step, you'll add more XAML markup to your application. This markup will create the button elements that will control the C1Scheduler's view.

Add the following XAML markup below the opening <Grid> tag. This will add row definition:

Markup	Copy Code
<Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition /> </Grid.RowDefinitions>

Below the Grid.RowDefinitions, add a general StackPanel control. The control should resemble the following markup:

Markup	Copy Code
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center"> <StackPanel.Resources> <Style TargetType="Button" x:Key="btnStyle"> <Setter Property="VerticalAlignment" Value="Stretch"/> <Setter Property="BorderThickness" Value="0"/> <Setter Property="MinWidth" Value="100"/> </Style> </StackPanel.Resources> </StackPanel>

Markup

Copy Code

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
    <StackPanel.Resources>
        <Style TargetType="Button" x:Key="btnStyle">
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="MinWidth" Value="100"/>
        </Style>
    </StackPanel.Resources>          
</StackPanel>

Add four general Button controls. Edit the markup so that it resembles the following. Note that each button has a Click event:

Markup	Copy Code
<Button Click="DayClick" Style="{StaticResource btnStyle}"> <Button.Content> <StackPanel Orientation="Horizontal"> <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/> <TextBlock Text=" Day" VerticalAlignment="Center"/> </StackPanel> </Button.Content> </Button> <Button Click="WorkWeekClick" Style="{StaticResource btnStyle}"> <Button.Content> <StackPanel Orientation="Horizontal"> <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/> <TextBlock Text=" Work Week" VerticalAlignment="Center"/> </StackPanel> </Button.Content> </Button> <Button Click="WeekClick" Style="{StaticResource btnStyle}"> <Button.Content> <StackPanel Orientation="Horizontal"> <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/> <TextBlock Text=" Week" VerticalAlignment="Center"/> </StackPanel> </Button.Content> </Button> <Button Click="MonthClick" Style="{StaticResource btnStyle}"> <Button.Content> <StackPanel Orientation="Horizontal"> <TextBlock Text="" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/> <TextBlock Text=" Month" VerticalAlignment="Center"/> </StackPanel> </Button.Content> </Button>

Markup

Copy Code

<Button Click="DayClick" Style="{StaticResource btnStyle}">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="&#xe161;" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
            <TextBlock Text=" Day" VerticalAlignment="Center"/>
        </StackPanel>
    </Button.Content>
</Button>
<Button Click="WorkWeekClick" Style="{StaticResource btnStyle}">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="&#xe162;" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
            <TextBlock Text=" Work Week" VerticalAlignment="Center"/>
        </StackPanel>
    </Button.Content>
</Button>
<Button Click="WeekClick" Style="{StaticResource btnStyle}">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="&#xe162;" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
            <TextBlock Text=" Week" VerticalAlignment="Center"/>
        </StackPanel>
    </Button.Content>
</Button>
<Button Click="MonthClick" Style="{StaticResource btnStyle}">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="&#xe163;" FontFamily="Segoe UI Symbol" FontSize="22" VerticalAlignment="Center"/>
            <TextBlock Text=" Month" VerticalAlignment="Center"/>
        </StackPanel>
    </Button.Content>
</Button>

What You've Accomplished

In this step you added markup for four button controls to your application. In the next step, you'll add code for the Button_Click events.